
import React, { useEffect, useState } from 'react';
import { Row, Col, Card, Switch, Statistic, Tooltip, Space, Popover } from 'antd'
import { history, connect } from 'umi';
import { ExclamationCircleOutlined, InfoCircleOutlined } from '@ant-design/icons'
import { Flex, Radio } from 'antd';
import Recruit from './components/recruit';
import ShopShow from './components/shopShow'
import PromoterImage from './components/promoterImage'
import Promotion from './components/promotion'
import PromoterPlatformImage from './components/promoterPlatformImage'
const promoterSetting = (props) => {
    const { dispatch } = props
    const [activeTabKey, setActiveTabKey] = useState('recruit');
    const [data, setData] = useState({})
    const renderContent = {
        recruit: <Recruit data={data} ></Recruit>,
        shopShow: <ShopShow data={data}></ShopShow>,
        promotion: <Promotion></Promotion>,
        promoterImage: <div>
            <PromoterImage title={<Popover title={<div>
                <div>
                    <div>  1、可自定用户分享时海报的展示顺序</div>
                    <div>  2、系统推荐海报无法编辑和删除</div>
                    <div> 3、系统推荐海报可隐藏</div>
                </div>
            </div>}>
                推广店铺海报  <InfoCircleOutlined></InfoCircleOutlined>
            </Popover >} useFor={'company'} promoterType={'system'}></PromoterImage>
            <PromoterImage title={<Popover title={<div>
                <div>
                    <div>  1、可自定用户分享时海报的展示顺序</div>
                    <div>  2、系统推荐海报无法编辑和删除</div>
                    <div> 3、系统推荐海报可隐藏</div>
                </div>
            </div>}>
                推广员海报<InfoCircleOutlined></InfoCircleOutlined>
            </Popover >} useFor={'promoter'} promoterType={'system'}></PromoterImage>
        </div>,
        platform: <div>
            <PromoterPlatformImage title={<Popover title={<div>
                <div>
                    <div>  1、可自定用户分享时海报的展示顺序</div>
                    <div>  2、系统推荐海报无法编辑和删除</div>
                    <div> 3、系统推荐海报可隐藏</div>
                </div>
            </div>}>
                自主素材  <InfoCircleOutlined></InfoCircleOutlined>
            </Popover >} useFor={'thirdMaterial'} promoterType={'system'}></PromoterPlatformImage>
            <PromoterPlatformImage title={<Popover title={<div>
                <div>
                    <div>  1、可自定用户分享时海报的展示顺序</div>
                    <div>  2、系统推荐海报无法编辑和删除</div>
                    <div> 3、系统推荐海报可隐藏</div>
                </div>
            </div>}>
                自主商品<InfoCircleOutlined></InfoCircleOutlined>
            </Popover >} useFor={'thirdGoods'} promoterType={'system'}></PromoterPlatformImage>
            <PromoterPlatformImage title={<Popover title={<div>
                <div>
                    <div>  1、可自定用户分享时海报的展示顺序</div>
                    <div>  2、系统推荐海报无法编辑和删除</div>
                    <div> 3、系统推荐海报可隐藏</div>
                </div>
            </div>}>
                自主海报 <InfoCircleOutlined></InfoCircleOutlined>
            </Popover >} useFor={'thirdPoster'} promoterType={'system'}></PromoterPlatformImage>
        </div>,
    }[activeTabKey]

    return <div>
        <Radio.Group onChange={(e) => { setActiveTabKey(e.target.value) }} value={activeTabKey} buttonStyle="solid">
            <Radio.Button value="recruit">招募页</Radio.Button>
            <Radio.Button value="promoterImage">推广海报</Radio.Button>
            <Radio.Button value="promotion">推广通知</Radio.Button>
            <Radio.Button value="shopShow">商品展示</Radio.Button>
            <Radio.Button value="platform">自主平台海报</Radio.Button>
        </Radio.Group>
        {renderContent}
    </div>

}

export default connect(({ loading }) => ({

    loading: loading.models.institution,
}))(promoterSetting);
